<script lang="ts" setup>
import {ref,nextTick} from "vue";

const count = ref(6);

const changeCount=()=>{
    count.value++;
    console.log("count的值",count.value);//7    
    // console.log((document.getElementById("p01") as HTMLElement).innerHTML);//6
    nextTick(()=>{
        console.log((document.getElementById("p01") as HTMLElement).innerHTML);//7
    })
}

</script>

<template>
    <h1>$nextTick的回顾</h1>
    <p>1、什么时候使用$nextTick()</p>
    <p>当需要使用 数据更新 影响的 新的dom时。</p>
    <p>2、为什么要使用$nextTick</p>
    <p> 因为，vue更新dom是异步的。既就是：当数据发生变化后，不会立即更新dom（更新dom的代码放在异步队列里）
        如果，在数据发生变化后，需要使用新的dom时，vue提供了$nextTick。供程序员使用。
        程序员只需要把操作新的dom的代码放在$nextTick的回调函数里，就ok。
        vue框架内部会在dom更新后，调用回调函数。
    </p>
    <p>补充理解：相当于针对某个数据的updated钩子函数。</p>
    <p id="p01"> count: {{count}}</p>
    <input type="button" value="修改count" @click="changeCount">
</template>

<style  scoped>
    
</style>
